<template>
  <!-- 项目退款订单管理 -->
  <div class="app-container">
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form" :inline="true" :model="form" label-width="130px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单编号:">
              <el-input v-model="form.id" clearable @keyup.enter.native="handleSearch" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户姓名:">
              <el-input v-model="form.user_name" clearable @keyup.enter.native="handleSearch" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号:">
              <el-input v-model="form.phone" clearable @keyup.enter.native="handleSearch" />
            </el-form-item>
          </el-col>
          <el-col :span="24"/>
          <el-col :span="8">
            <el-form-item label="项目名称:">
              <el-input v-model="form.project_name" clearable @keyup.enter.native="handleSearch" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单状态:">
              <el-select
                v-model="form.order_status"
                placeholder="请选择"
                clearable
                @keyup.native="handleSearch"
              >
                <el-option
                  v-for="(item,index) in orderType"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="退款状态:">
              <el-select
                v-model="form.refund_status"
                placeholder="请选择"
                clearable
                @keyup.native="handleSearch"
              >
                <el-option
                  v-for="(item,index) in refundType"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="退款原因:">
              <el-input v-model="form.return_reason" clearable @keyup.enter.native="handleSearch" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="退款申请日期:" width="236">
              <el-date-picker
                v-model="refund_time"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24"/>
          <el-col :span="6" :offset="18">
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <!-- <el-button type="primary" @click="handleExport">导出</el-button> -->
              <!-- <Exprotcomponent :params="form" url="admin/order/card_ticket_export" type="php"></Exprotcomponent> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 主页列表 -->
    <div class="listDiv" v-loading="tableLoading">
      <el-table ref="tableData" :data="tableData" style="width: 100%" height="500px">
        <!--   -->
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="50"
          align="center"
          :index="table_index"
        />
        <el-table-column label="订单编号" prop="id" align="center" width="200px" />
        <el-table-column label="用户姓名" prop="realname" align="center">
        </el-table-column>
        <el-table-column label="手机号" prop="username" align="center" width="120px">
        </el-table-column>
        <el-table-column label="项目名称" prop="project_name" align="center" width="120px" />
        <el-table-column label="项目医院" prop="hospital_name" align="center" width="120px" />
        <el-table-column label="订单状态" prop="status_name" align="center" width="120px"/>
        <el-table-column label="退款金额" prop="pay_amount" align="center" width="120px"/>
        <el-table-column label="退款申请时间" prop="created_at" align="center" width="200px"/>
        <el-table-column label="退款原因" prop="return_reason" align="center" width="120px"/>
        <el-table-column label="退款说明" prop="return_msg" align="center" width="120px">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="
                toRoutes(
                  'ProjectOrder',
                  scope.row.return_msg,
                )
              "
              v-if="scope.row.return_msg-0"
            >{{ scope.row.return_msg}}</el-button>
            <span v-else>{{scope.row.return_msg}}</span>
          </template>
        </el-table-column>
        <el-table-column label="退款凭证" prop="img_list" align="center" width="120px">
          <template slot-scope="scope">
            <span v-if="scope.row.return_reason!='更换项目'&&scope.row.img_list.length > 0">
              <div
                style="color: #409eef; cursor:pointer"
                @click="proofOfRefund(scope.row.img_list)"
              > 查看凭证</div>
            </span>
             <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="退款状态" prop="refund_name" align="center" width="120px"/>
        <el-table-column label="退款审核时间" prop="refund_time" align="center" width="200px"/>
        <el-table-column label="驳回原因" prop="admin_remark" align="center" width="120px" />
        <el-table-column label="操作人" prop="admin_name" align="center" width="120px" />
        <el-table-column fixed="right" width="100" label="操作" align="center">
          <template slot-scope="scope">
            <!-- <div> -->
            <el-button
              v-if="scope.row.refund_status==1"
              type="text"
              @click="Examination(scope.row,0,scope.row.id)"
            >退款</el-button>
            <!-- </div> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagesCon">
        <div>
          <el-pagination
            :current-page="form.page"
            :page-sizes="page_sizes"
            :page-size="form.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <!-- 审核 -->
    <el-dialog title="退款审核" :visible.sync="dialogVisible" width="468px">
      <el-form
        ref="ruleForm"
        :rules="ruleForm"
        :inline="true"
        label-width="80px"
        label-position="right"
        :model="datas"
      >
        <el-form-item label="审核意见" prop="status">
          <el-radio-group v-model="datas.status" @change="opinionChange">
            <p style="display: flex;">
              <el-radio v-if="!istabledata" label="1">通过</el-radio>
              <el-radio label="2">驳回</el-radio>
            </p>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="datas.status== 2 " label="驳回原因" prop="admin_remark">
          <el-input v-model="datas.admin_remark" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="isDisable" @click="rewardSure('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 退款凭证 -->
    <el-dialog title="退款凭证" :visible.sync="dialogProofVisible" width="666px">
      <div class="item">
        <el-form ref="form" :model="form" label-width="130px">
          <el-row class="itemBox">
            <el-col :span="2">
              <el-button  icon="el-icon-arrow-left" :disabled="mark == 0" @click="prevIndex" class="icon"/>
            </el-col>
            <el-col :span="20">
              <div v-for="(imgUrl, index) in bannerList" v-show="index===mark" :key="index" class="slideshow">
                <a href="#">
                  <img :src=common.img_url+imgUrl style=" width:400px; ">
                </a>
              </div>
            </el-col>
            <el-col :span="2">
              <el-button  icon="el-icon-arrow-right" :disabled="mark == bannerList.length - 1" @click="nextIndex" class="icon"/>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>

  import serv from "@/utils/request1";
  import { refundCheck, refundOrder } from '../../api/NewRetailSystem'
  import { withdraw_check } from '../../api/PLUSManagement'

  export default {
    name: "ProjectOrderRefund",
    data() {
      return {
        userId: sessionStorage.getItem('userId'), // 登录用户的id
        username: sessionStorage.getItem('username'), // 登录用户的名称
        refund_time: [],
        form: {
          type:1, //1-项目 2-商品
          id: "", //	订单编号
          user_name: "",//	姓名
          phone:"",//手机号
      	  project_name: "",//	项目名称（项目）
          order_status: "", //	0待使用 1预约中 2预约关闭 3已核销 4退款中 5已退款 6已付定金（项目）
          refund_status: "", //	退款状态 1待审核 2退款失败 3退款成功
          start_time: "", //
          end_time: "", //
          page: 1,
          pagesize: 10
        },
        // 分页
        page_sizes: [10, 30, 50, 100], // 每页显示个数
        page_totals: 0, // 总条目数,
        //0待使用、1预约中、2预约关闭、3已付尾款、4已退款、5已过期、6项目已完成
        orderType: [
          { name: "待使用", value:1 },
          { name: "预约中", value: 2 },
          { name: "预约关闭", value:3 },
          { name: "已付尾款", value: 4 },
          { name: "已退款", value: 5 },
          { name: "已过期", value: 6 },
          { name: "项目已完成", value: 7 },

          // { name: "待使用", value: 0 },
          // { name: "预约中", value: 1 },
          // { name: "预约关闭", value: 2 },
          // { name: "已付尾款", value: 3 },
          // { name: "已退款", value: 4 },
          // { name: "已过期", value: 5 },
          // { name: "项目已完成", value: 6 },

        ],
        refundType:[
          { name: "待审核", value: 1 },
          { name: "退款失败", value: 2 },
          { name: "退款成功", value: 3 },
        ],
        tableData: [],
        tableLoading: false,
        //
        dialogProofVisible: false, //退款凭证弹窗显示状态
        dialogVisible: false, //退款审核弹窗显示状态
        isDisable: false, // 表单重复提交
        istabledata: true,
        order_id:'',//订单id
        datas: {
          status: 1, //1同意 2拒绝
          admin_remark: null, //拒绝备注
        },//退款弹窗数据
        // 校验规则captcha
        ruleForm: {
          status: [{ required: true, message: '请选择审核意见', trigger: 'change' }],
          admin_remark: [
            { required: true, message: '驳回原因为必填项', trigger: 'blur' }
          ],
        },

        mark: 0, //比对图片索引的变量
        bannerList:[
          'http://mmkapp.oss-cn-beijing.aliyuncs.com/redTheme/mping_logo.png',
          'http://mmkapp.oss-cn-beijing.aliyuncs.com/beauty_share/mping_logo.png',
          'http://mmkapp.oss-cn-beijing.aliyuncs.com/goldTheme/mping_logo.png',
        ] ,
      };
    },
    watch: {
      refund_time(val) {
        this.form.start_time = val ? val[0] : ''
        this.form.end_time = val ? val[1] : ''
      },
    },
    //新加路由保存参数
    beforeRouteLeave(to, from, next) {
      // const answer = window.confirm("当前页面搜索条件将会被保存");
      //更新 put
      let keyname = this.$route.name;
      let value = JSON.stringify(this.form);
      sessionStorage.setItem(keyname, value);
      next();
    },

    mounted() {
      // 获取默认列表
      if (sessionStorage.getItem(this.$route.name)) {
        this.form = JSON.parse(sessionStorage.getItem(this.$route.name));
      }
      this.getList(this.form);
    },
    methods: {
      //上一张
      prevIndex(){
        this.mark = this.mark - 1;
      },
      //下一张
      nextIndex(){
        this.mark = this.mark + 1;
      },

      //退款凭证弹出框
      proofOfRefund(item){
        this.dialogProofVisible = true
        this.bannerList = item
      },

      // 审核弹窗监听radio切换
      opinionChange(val) {
        this.datas.status = val
        this.$refs.ruleForm.clearValidate()
      },

      // 审核、修改弹框
      Examination(datas, type, id) {
        // type:0  审核
        // type:0 datas有值 待审核
        // type:1  修改银行卡
        this.datas.status = ''
        this.datas.admin_remark = ''
        console.log("id",id)
        this.order_id = id
        // console.log(this.ids);
        // 审核
        // if (type == 0) {
        //   this.ValuableFlaf = true
        // }
        //
        // if (datas) {
        //   // 有值table 页面
          this.dialogVisible = true
          this.ValuableFlaf = true
        // } else {
        //   // 列表页的群体操作
        //   // if (this.multipleSelection.length >= 1) {
        //   //   this.dialogVisible = true
        //   // } else {
        //   //   this.$message({
        //   //     message: '请先勾选需要审核的数据',
        //   //     type: 'warning'
        //   //   })
        //   // }
        // }
        this.istabledata = type
        // this.typeFlag = type
        // console.log(this.typeFlag);
      },

      // 审核通过、审核驳回、待审核传参
      change(status, flag) {
        const data = {
          type: this.form.type,
          admin_name: this.username,
          admin_id: this.userId,
          status:status,
          admin_remark: this.datas.admin_remark,
          order_id: this.order_id
        }
        // if (flag) {
          // 当flag为真时，修改的id参数
          // data.order_id.push(this.ids)
        // } else {
        //   const arr = []
        //   if (this.multipleSelection.length >= 1) {
        //     // 批量审核
        //     this.multipleSelection.forEach((datas) => {
        //       arr.push(datas.id)
        //     })
        //     data.relation_ids = JSON.stringify(arr)
        //   } else {
        //     // 选择每一行的审核
        //     data.order_id.push(this.rowInfo.id)
        //     // console.log(33)
        //     data.order_id = JSON.stringify(data.order_id)
        //   }
        // }
        this.AuditPass(data)
        // // 审核通过时调用
        // // console.log(this.datas.opt);
        // if (this.datas.opt == 1) {
        //   this.AuditPass(data);
        //   // 审核驳回及待审核
        // } else if (this.datas.opt == 2) {
        //   data.transStatus = 2;
        //   this.Reject(data);
        // } else {
        //   data.transStatus = 0;
        //   this.Reject(data);
        // }
        // console.log(this.datas.opt);
      },

      //审核确认
      rewardSure(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
        if (this.datas.status == 1) {
          this.change(1, true)
          this.$refs.ruleForm.resetFields()
        } else {
          this.change(2, false)
          this.$refs.ruleForm.resetFields()
        }
          } else {
            this.$message({
              showClose: true,
              message: '有必填项没填写!',
              type: 'warning'
            })
            return false
          }
        })
        this.dialogVisible = false

      },

      // 批量审核通过/单行审核通过、复用请求
      AuditPass(e) {
        this.isDisable = true
        const datas = e
        refundCheck(datas)
          .then((res) => {
            this.isDisable = false
            // console.log(res);
            if (res.data.code == 200) {
              this.$message.success(res.data.msg)
              this.getList(this.form)
            } else {
              this.$message.error(res.data.msg)
            }
          })
          .catch((error) => {
            this.$message.error(error)
            this.tableLoading = false
          })
      },

      toRoutes(name,data) {
        // console.log('data',data);
        let route = { name,query:{order_id:data} };
        this.$router.push(route);
      },
      // 序号
      table_index(index) {
        return (this.form.page - 1) * this.form.pagesize + index + 1;
      },
      // 获取列表
      getList(e) {
        this.tableLoading = true;
        refundOrder(e)
          .then(res => {
            console.log("xinagqing", res);
            if (res.data.code == 200) {
              this.tableData = res.data.data;
              this.page_totals = res.data.total;
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "warning"
              });
            }
            this.tableLoading = false;
          })
          .catch(err => {
            this.errorStatus(err.msg);
            this.tableLoading = false;
          });
      },
      // 查询
      handleSearch() {
        this.form.page = 1;
        this.getList(this.form);
      },
      // 导出
      handleExport() {
        let datas = { ...this.form };
        delete datas.page;
        delete datas.pagesize;
        orderExport(datas)
          .then(res => {
            commonFn.downFile("卡订单导出", res);
          })
          .catch(err => {
            this.errorStatus(err.msg);
          });
      },
      // 改变页面条数
      handleSizeChange(val) {
        this.form.pagesize = val;
        this.getList(this.form);
      },
      // 选择页数
      handleCurrentChange(val) {
        this.form.page = val;
        this.getList(this.form);
      },
    }
  };
</script>
<style lang="less" scoped>
  .app-container {
    padding: 20px !important;
    background: transparent;
  }
  /* 主页列表样式 */
  .listDiv {
    margin-bottom: 20px;
    padding: 0 20px;
  }
  .formDiv{
    padding: 20px;
  }
  .pagesCon {
    text-align: right;
    margin-top: 20px;
  }

  .item{
    .itemBox{
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-direction: row;
      .slideshow{
        text-align: center;
      }
    }
  }

</style>
